<template>
  <div id="loadMore" class="loadmore" @touchstart="touchstart($event)" @touchmove="touchmove($event)" @touchend="touchend($event)">
    <div class="pull-wrap">
        <div v-show="openRefresh">
          <transition  name="fade"><i class="loadmore-icon" v-if="state==3&&refreshTips" ></i></transition>
          <transition  name="fade"><i v-show="refreshTips" :class="state==1 ? 'pull-arrow pull-toggle': state==2?'pull-arrow':''"></i></transition>
          <transition  name="fade"><span v-if="refreshTips" class="pull-text">{{refreshTips}}</span></transition>
        </div>
    </div>
    <slot></slot>
    <div class="loadmore-tip" id="loadTips" v-if="totalCount > 0 && totalCount >= pageSize">
      <i v-show="loadTips=='正在加载中'" class="loadmore-icon"></i>
      {{loadTips}}
    </div>
  </div>
</template>
<script>
var clr, clr2 ,clr3;
export default {
  props: {
    pageIndex: {
      type: [Number, String],
      default: "1"
    },
    pageSize: {
      type: [Number, String],
      default: "10"
    },
    totalCount: {
      type: [Number, String],
      default: "0"
    },
    tips: {
      type: [String],
      default: "暂无数据"
    },
    openRefresh: {
      type: [Boolean],
      default: false
    }
  },
  data() {
    return {
      isPull: false,//是否达到了松开刷新的临界点
      state: 1,//1:下拉刷新，2：松开刷新，3：更新中
      refreshTips:'',
      loadTips: "正在加载中"
    };
  },
  watch: {
    pageIndex() {
      this.loadMore();
    },
    totalCount:{
      handler(val, oldval) {
       if (val > 0) {
          this.loadMore();
        }
      },
      immediate: true
    }
  },
  methods: {
    //上滑动加载更多
    loadMore() {
      var scope = this;
      scope.loadTips = "正在加载中";
      let flag = true;
      let pageSize = this.pageSize;
      let pageIndex = this.pageIndex;
      let totalCount = this.totalCount;
      // console.log(pageSize,pageIndex,totalCount)
      return new Promise(function(resolve, reject) {
        window.onscroll = function() { 
          clr = setTimeout(() => {
            let scrollHeight =  document.documentElement.scrollHeight || document.body.scrollHeight;
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
            if (!document.getElementById("loadTips")) {
              return;
            }
            let rectBottom = document.getElementById("loadTips").getBoundingClientRect().bottom | 0;
            //if (scrollTop + clientHeight >= scrollHeight - 25) {
            if (rectBottom < clientHeight + 25) {
              if (flag) {
                flag = false;
                var size = totalCount - pageIndex * pageSize;
                if (size > 0) {
                  scope.$emit("loadmore", pageIndex + 1);
                  resolve(true);
                } else {
                  scope.loadTips = "没有更多数据了";
                  resolve(false);
                }
                clearTimeout(clr);
              }
            }
          }, 400);
        };
      });
    },
    //下拉刷新
    refresh() {
        this._startPos = 0
        this._transitionHeight = 0
        this.obj = document.getElementById("loadMore")
        this.objTop = this.obj.offsetTop
    },
    touchstart(event){
      if (!this.openRefresh) {
        return;
      }
      this._startPos = event.targetTouches[0].screenY
      this.obj.style.transition = "transform 0s linear"
    },
    touchmove(event){
      if (!this.openRefresh) {
        return;
      }
      var h = Math.ceil(this.obj.getBoundingClientRect().top)
      this._transitionHeight =((event.targetTouches[0].screenY - this._startPos) * 0.3) | 0
      if (h>=this.objTop&&this._transitionHeight >= 0) {
        if (typeof event.cancelable !== 'boolean' || event.cancelable) {
          event.preventDefault();
        }
        this.obj.style.transform = "translateY(" + this._transitionHeight + "px)"
        if (this._transitionHeight > 0 && this._transitionHeight < 100) {
          this.state = 1;
          this.refreshTips = "下拉刷新";
          this.isPull = false;
          if (this._transitionHeight > 50) {
            this.state = 2;
            this.refreshTips = "松开更新";
            this.isPull = true;
          }
        }
      }
    },
    touchend(event){
      if (!this.openRefresh) {
        return;
      }
      this.obj.style.cssText = `transition:transform 0.2s ease 0.2s;transform:translateY(0);`
      if (this.isPull) {
        var h = Math.ceil(this.obj.getBoundingClientRect().top + 40)
        this._transitionHeight = event.changedTouches[0].screenY - this._startPos;
        if (h>=this.objTop&&this._transitionHeight >= 0) {
          this.state = 3;
          this.refreshTips = "正在刷新中";
          this.obj.style.transform = "translateY(40px)";
          clr2 = setTimeout(()=> {
            this.obj.style.transform = "translateY(0)";
            clearTimeout(clr2);
          }, 1000);
          clr3 = setTimeout(()=> {
            this.refreshTips=''
            this.isPull = false;
            this.$emit("refresh", true);
          }, 1500);
        } else {
            this.state = 1;
            this.obj.style.transform = "translateY(0)"
        }
      }else{
        clr2 = setTimeout(()=> {
          this.state = 1;
          this.refreshTips = ''
          clearTimeout(clr2);
        }, 400);
      }
    }
  },
  destroyed() {
    clearTimeout(clr);
    clearTimeout(clr2);
    clearTimeout(clr3);
  },
  mounted() {
    //this.loadMore()
    if (this.openRefresh) {
      this.$nextTick(()=>{
        this.refresh()
      })
    }
  }
};
</script>
<style scoped>
.loadmore{
  margin-top:-40px;
}
.fade-enter-active,.fade-leave-active {
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.loadmore-tip {
  color: #aaa;
  font-size: 14px;
  text-align: center;
  height: 50px;
  line-height: 50px;
}
.pull-wrap {
  height:40px;
  line-height: 40px;
  text-align: center;
  width:100%;
}
.no-data-tip {
  text-align: center;
  padding-top: 36%;
}
.no-data-tip p {
  font-size: 16px;
  margin: 10px auto;
  color: #aaa;
  padding: 0;
}
.no-data-tip img {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: 150px;
}
@keyframes rotate-loading {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-loading {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.loadmore-icon {
  vertical-align: -1px;
  width: 12px;
  height: 12px;
  display: inline-block;
  background: url("")
    no-repeat;
  background-size: 12px 12px;
  -webkit-animation: rotate-loading 0.6s linear forwards infinite;
  animation: rotate-loading 0.6s linear forwards infinite;
}
.pull-text {
  text-align: center;
  color: #aaa;
  height: 40px;
  font-size:14px;
  line-height: 40px;
}
.pull-arrow {
  vertical-align: -6px;
  height: 18px;
  width: 14px;
  display: inline-block;
  background: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMjAxLjg5NCAyMDEuODk0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMDEuODk0IDIwMS44OTQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cG9seWdvbiBzdHlsZT0iZmlsbDojMDEwMDAyOyIgcG9pbnRzPSIzMy43NjgsNjYuMDE5IDM5LjEwOCw3MS4yNjYgOTcuMTcxLDE0LjIwNCA5Ny4xNzEsMjAxLjg5NCAxMDQuNzE5LDIwMS44OTQgDQoJCQkxMDQuNzE5LDE0LjE5NCAxNjIuNzg2LDcxLjI2NiAxNjguMTI1LDY2LjAxOSAxMDAuOTQ3LDAgCQkiLz4NCgk8L2c+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==")
    no-repeat;
  transition: all 0.2s ease;
}
.pull-toggle {
  vertical-align: -2px;
  transform: rotate(180deg);
}
</style>